<!-- 蓝色登录页面2 -->
<template>
	<view>
		<view class="img-a">
			<view class="t-b">
				<view>您好，</view>
				<view>欢迎使用消防单位智能管理系统</view>
			</view>
		</view>
		<view class="login-view">
			<view v-if="!tip" class="t-login">
				<form class="cl">
					<view class="t-a u-border-bottom display_flex">
						<text class="txt">性质</text>
						<input maxlength="18" disabled v-model="powerTitle" :title="power" />
					</view>
					<view class="t-a u-border-bottom display_flex">
						<text class="txt">姓名</text>
						<input type="text" placeholder="请输入姓名" v-model="nickName" />
					</view>
					<view class="t-a u-border-bottom display_flex">
						<text class="txt">手机号</text>
						<input type="number" maxlength="11" placeholder="请输入手机号" v-model="phone" />
					</view>
					<view class="t-a u-border-bottom display_flex" @click="showUnit=true">
						<text class="txt">单位</text>
						<input placeholder="请选择单位" disabled v-model="unit" />
					</view>
					<view class="margin_top_normal">
						<button @click="login()">绑定微信并登录</button>
					</view>
				</form>
				<qianziyu-select :show="showUnit" type="radio" name="unitName" :dataLists="unitList" placeholder="请输入" @cancel="showUnit=false" @search="selectSearch" @submit="selectSubmit"></qianziyu-select>
			</view>
			<view v-else class="tip">
				{{tip}}
			</view>
		</view>
	</view>
</template>
<script>
	import tools from '../../tools';
	import { BASE_IP } from '@/common/http/url.js';
	import { useLoginStore } from '@/store/login.js';
	export default {
		data() {
			return {
				unitList: [],
				allUnitList: [],
				nickName: '',
				unit: null,
				unitId: null,
				power: 3,
				powerTitle: "企业单位",
				showUnit: false,
				phone: '',
				pwd: '',
				authority: ['管理员', '监管人员', '企业单位'],
				openid: null,
				inviter: '',
				groupId: '',
				unitGroupId: '',
				tip: null,
			};
		},
		onLoad(options) {
			console.log("启动参数1", options)
			if (options.power) {
				this.power = options.power;
			}
			if (options.unitId) {
				this.unitId = options.unitId;
			}
			if (options.inviter) {
				this.inviter = options.inviter;
			}
			if (options.groupId) {
				this.groupId = options.groupId;
			}
			if (options.unitGroupId) {
				this.unitGroupId = options.unitGroupId;
			}
			if ([1, 2, 3].includes(this.power)) {
				this.powerTitle = this.authority[this.power - 1];
			}
			this.getCode();
		},
		methods: {
			selectSubmit(e) {
				this.showUnit = false
				this.unit = e.unitName
				this.unitId = e.unitID
			},
			selectSearch(e) {
				console.log("selectSearch", e)
				if (e != '') {
					this.unitList = this.allUnitList.filter(res => {
						return res.unitName.indexOf(e) > -1
					})
				} else {
					this.unitList = this.allUnitList
				}
			},
			handleNicknameInput(e) {
				this.nickName = e.detail.value
			},
			getCode() {
				uni.showLoading();
				wx.login({
					success: (res) => {
						if (res.code) {
							this.getOpenid(res.code)
						} else {
							console.log('getCode出错' + res.errMsg)
						}
					}
				})
			},
			getOpenid(jsCode) {
				let url = BASE_IP + "pc/wx/openId"
				uni.request({
					method: "GET",
					url: url,
					data: { code: jsCode },
					success: (res) => {
						console.log("获取openid", res.data)
						if (res.statusCode == 200) {
							if (res.data.openid == 'ohUWw7Rl3mQKgLdGkKqju7zhrkr4') {
								//开发阶段调试的模拟账户
								//ohUWw7Rl3mQKgLdGkKqju7zhrkr4
								//ohUWw7RiZ3-JwrOcVBZjgJq4EOs4
								//ohUWw7ckmSu_L4p4FAi4fmWLRCko
								//res.data.openid = '123456';
							}
							if (res.data.power && res.data.power > 0) {
								//方便小程序审核时按需从后端配置转变时使用
								this.power = res.data.power;
							}
							console.log("power", this.power);
							this.openid = res.data.openid;
							this.isRegister(res.data.openid);
						}
					}
				})
			},
			isRegister(openId) {
				let url = BASE_IP + "pc/wx/user/isRegister?openId=" + openId
				uni.request({
					method: "POST",
					url: url,
					success: (res) => {
						console.log("获取isRegister", res.data)
						if (res.statusCode == 200) {
							//res.data = false;
							if (res.data) {
								this.loginToOpenId(openId)
							} else {
								this.getUnit();
							}
						}
					}
				})
			},
			loginToOpenId(openId) {
				let url = BASE_IP + "pc/wx/user/auto/login?openId=" + openId
				uni.request({
					method: "POST",
					url: url,
					success: (res) => {
						console.log("openId登录", res.data);
						tools.hideLoading();
						if (res.statusCode == 200) {
							if (res.data.code == 405) {
								this.tip = res.data.errors;
							} else {
								let store = useLoginStore();
								store.user = res.data.msg;
								uni.setStorageSync('user', res.data.msg);
								let url = uni.getStorageSync('url');
								if (url == undefined || url == '') {
									url = '/pages/index/index';
								}
								uni.removeStorageSync('url');
								uni.reLaunch({ url: '/pages/index/index' });
								//uni.switchTab({ url: url });
							}
						}
					}
				})
			},
			getUnit() {
				let url = BASE_IP + "pc/unit/listAll"
				uni.request({
					method: "GET",
					url: url,
					success: (res) => {
						console.log('单位列表', res.data)
						if (res.statusCode == 200) {
							if (res.data.data) {
								let ul = [];
								for (let u in res.data.data) {
									let unit = JSON.parse(res.data.data[u]);
									if (unit.unitID == this.unitId) {
										this.unit = unit.unitName;
									}
									ul.push(unit);
								}
								this.unitList = ul
								this.allUnitList = JSON.parse(JSON.stringify(ul))
							}
						}
					}
				});
				uni.hideLoading();
			},
			login() {
				if (!this.nickName) {
					uni.showToast({
						title: '请输入姓名',
						icon: 'error',
						duration: 2000
					});
					return;
				}
				if (!this.phone) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'error',
						duration: 2000
					});
					return;
				}
				if (!this.unitId) {
					uni.showToast({
						title: '请选择单位',
						icon: 'error',
						duration: 2000
					});
					return;
				}
				let userForm = {
					"nickName": this.nickName,
					"unitId": this.unitId,
					"openId": this.openid,
					"inviter": this.inviter,
					"groupId": this.groupId,
					"unitGroupId": this.unitGroupId,
					"phone": this.phone,
					"power": this.power,
					"userName": this.phone,
					"state": 0,
				};
				let store = useLoginStore();
				let url = BASE_IP + 'pc/wx/user/register';
				uni.request({
					url: url,
					data: userForm,
					method: 'POST',
					success: (res) => {
						console.log('wl.res', res);
						if (res.statusCode == 200) {
							console.log('登录请求成功：', res.data);
							if (res.data?.success === true) {
								this.loginToOpenId(this.openid)
							}
							if (res.data?.success === false) {
								uni.showModal({
									title: "提示",
									content: res.data.msg,
									showCancel: false
								})
							}
						}
						if (res.statusCode == 500) {
							uni.showToast({
								title: '账号或密码错误',
								icon: 'error'
							});
						}
						if (res.statusCode == 404) {
							uni.showToast({
								title: '服务器错误',
								icon: 'error'
							});
						}
					},
					fail: (res) => {
						uni.showToast({
							title: res.errMsg,
							icon: 'error',
							duration: 2000
						});
						return;
					}
				});
			},
		}
	};
</script>

<style>
	.txt {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
	}

	.img-a {
		width: 100%;
		height: 450rpx;
		background: #2796f2;
	}

	.reg {
		font-size: 28rpx;
		color: #fff;
		height: 90rpx;
		line-height: 90rpx;
		/* border-radius: 50rpx; */
		font-weight: bold;
		/* background: #f5f6fa; */
		color: #000000;
		text-align: center;
		margin-top: 30rpx;
	}

	.login-view {
		width: 100%;
		position: relative;
		margin-top: -120rpx;
		background-color: #ffffff;
		border-radius: 8% 8% 0% 0;
	}

	.t-login {
		width: 600rpx;
		margin: 0 auto;
		font-size: 28rpx;
		padding-top: 80rpx;
	}

	.t-login button {
		font-size: 28rpx;
		background: #2796f2;
		color: #fff;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 50rpx;
		font-weight: bold;
	}

	.t-login input {
		height: 90rpx;
		/* border-bottom: 1px solid #e9e9e9; */
		font-size: 28rpx;
	}

	.t-login .t-a {
		position: relative;
	}

	.t-a .txt {
		width: 140rpx;
	}

	.t-b {
		text-align: left;
		font-size: 42rpx;
		color: #ffffff;
		padding: 130rpx 0 0 70rpx;
		font-weight: bold;
		line-height: 70rpx;
	}

	.t-login .t-c {
		position: absolute;
		right: 22rpx;
		top: 22rpx;
		background: #5677fc;
		color: #fff;
		font-size: 24rpx;
		border-radius: 50rpx;
		height: 50rpx;
		line-height: 50rpx;
		padding: 0 25rpx;
	}

	.t-login .t-d {
		text-align: center;
		color: #999;
		margin: 80rpx 0;
	}

	.t-login .t-e {
		text-align: center;
		width: 250rpx;
		margin: 80rpx auto 0;
	}

	.t-login .t-g {
		float: left;
		width: 50%;
	}

	.t-login .t-e image {
		width: 50rpx;
		height: 50rpx;
	}

	.t-login .t-f {
		text-align: center;
		margin: 150rpx 0 0 0;
		color: #666;
	}

	.t-login .t-f text {
		margin-left: 20rpx;
		color: #aaaaaa;
		font-size: 27rpx;
	}

	.t-login .uni-input-placeholder {
		color: #aeaeae;
	}

	.cl {
		zoom: 1;
	}

	.cl:after {
		clear: both;
		display: block;
		visibility: hidden;
		height: 0;
		content: '\20';
	}

	.btn60 {
		width: 70%;
		margin: 10rpx auto;
	}

	.iagree {
		color: #49a0ff;
		font-size: 14px;
		text-decoration: underline;
	}

	.iagree:active {
		opacity: 0.5;
	}

	.tip {
		text-align: center;
		padding-top: 110rpx;
	}
</style>